<template>
  <div class="hot-list">
    <div class="hot-list-wrapper">
      <div
        class="list-wrapper-pc"
        :style="{
          display: pcDisplay,
        }"
      >
        <div class="search flex-column-center">
          <div class="input-wrapper">
            <img src="./images/hot.svg" />
            <a-input
              class="ml-10"
              v-model:value="hotValue"
              placeholder="搜索···"
              allow-clear
              @change="handleInput"
            />
          </div>

          <div class="tips">
            <img src="../../assets/images/bell.svg" style="width: 24px" />
            数据更新提示：所有平台热点数据每小时自动更新，支持手动刷新全部或单独更新某一平台。
            <RedoOutlined
              class="c-p"
              style="font-size: 16px"
              @click="refreshAll"
            />
          </div>
        </div>
        <div class="list-wrapper-author flex">
          <div class="list-wrapper flex">
            <div
              v-for="(item, index) of list"
              :key="index"
              class="hot-list-item flex-column ml-25 mt-15"
              @mouseenter="item.show = !item.show"
              @mouseleave="item.show = !item.show"
            >
              <div class="title flex">
                <div class="title-left flex-column-center">
                  <img :src="item.icon" />
                  <span class="name">{{ item.name }}</span>
                  <span class="last-update-time ml-5 mt-5">{{
                    "(" + item.last_update_time + ")"
                  }}</span>
                </div>

                <RedoOutlined
                  :class="['c-p', { rotate: item.refreshFlag }]"
                  v-if="item.show"
                  @click="refreshItem(item)"
                />
              </div>

              <div
                class="content-list pr-10 mt-15"
                :class="[
                  'content-list pr-10 mt-15',
                  { 'scroll-bar': item.show },
                ]"
              >
                <div
                  v-for="(child, childIndex) of item.list"
                  :key="childIndex"
                  class="content-item flex c-p mt-15"
                  @click="goToOrigin(child)"
                >
                  <div
                    class="content-index"
                    :style="{
                      color: colorObj[childIndex],
                    }"
                  >
                    {{ childIndex + 1 + "." }}
                  </div>
                  <div class="content-text ml-5">{{ child.title }}</div>
                  <div class="content-num ml-10">{{ child.hot_num }}</div>
                </div>
              </div>
            </div>

            <div class="hot-list-item flex-center ml-25 mt-15">
              <p class="text">其余平台待补充······</p>
            </div>
          </div>

          <div class="author-article">
            <div
              v-for="(item, index) of articleList"
              :key="index"
              class="article-item c-p mt-15"
              @click="goOriginArticle(item)"
            >
              <div class="name text-ellipsis">
                {{ index + 1 }}. &nbsp;{{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="list-wrapper-mobile"
        :style="{
          height: '100%',
          display: mobileDisplay,
        }"
      >
        <div class="flex-column slot-class">
          <div class="tips flex p-10">
            <img
              src="../../assets/images/bell.svg"
              style="width: 24px; margin-right: 5px"
            />
            数据更新提示：所有平台热点数据每小时自动更新，支持手动刷新全部或单独更新某一平台。
            <RedoOutlined
              class="c-p ml-5"
              style="font-size: 16px"
              @click="refreshAll"
            />
          </div>

          <div class="input-wrapper flex p-10">
            <img src="./images/hot.svg" style="width: 24px" />
            <a-input
              class="ml-10"
              v-model:value="hotValue"
              placeholder="搜索···"
              allow-clear
              @change="handleInput"
              style="width: 300px"
            />
          </div>

          <div class="list-wrapper">
            <div
              v-for="(item, index) of list"
              :key="index"
              class="hot-list-item flex-column"
              :class="['hot-list-item flex-column', { 'mt-15': index !== 0 }]"
              @mouseenter="item.show = !item.show"
              @mouseleave="item.show = !item.show"
            >
              <div class="title flex">
                <div class="title-left flex-column-center">
                  <img :src="item.icon" />
                  <span class="name">{{ item.name }}</span>
                  <span class="last-update-time ml-5 mt-5">{{
                    "(" + item.last_update_time + ")"
                  }}</span>
                </div>

                <RedoOutlined
                  :class="['c-p', { rotate: item.refreshFlag }]"
                  v-if="item.show"
                  @click="refreshItem(item)"
                />
              </div>

              <div
                class="content-list pr-10 mt-15"
                :class="[
                  'content-list pr-10 mt-15',
                  { 'scroll-bar': item.show },
                ]"
              >
                <div
                  v-for="(child, childIndex) of item.list"
                  :key="childIndex"
                  class="content-item flex c-p mt-10"
                  @click="goToOrigin(child)"
                >
                  <div
                    class="content-index"
                    :style="{
                      color: colorObj[childIndex],
                    }"
                  >
                    {{ childIndex + 1 + "." }}
                  </div>
                  <div class="content-text ml-5">{{ child.title }}</div>
                  <div class="content-num ml-10">{{ child.hot_num }}</div>
                </div>
              </div>
            </div>

            <div class="flex-center no-more mt-15">没有更多了~</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import { RedoOutlined } from "@ant-design/icons-vue";

import { getHotList, refreshHotList } from "../../api/hot/list";
import { debounce } from "../../utils/util";

let icons = import.meta.glob("./images/*.svg", { eager: true });

let colorObj = {
  0: "#f22",
  1: "#de6b30",
  2: "#cc984f",
};
const hotValue = ref(null);

const handleInput = debounce(hotSearch, 1000, true);
function hotSearch() {
  getHotList({
    hotWords: hotValue.value,
  }).then((res) => {
    if (res.code === 0) {
      for (const [k, v] of Object.entries(res.data)) {
        list.value.forEach((item) => {
          if (item.type === k) {
            item.list = v.list;
            item.last_update_time = v.updateTime;
          }
        });
      }
    }
  });
}

const pcDisplay = ref("block");
const mobileDisplay = ref("none");

function changePcMobile() {
  if (
    navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    )
  ) {
    pcDisplay.value = "none";
    mobileDisplay.value = "block";
  } else {
    pcDisplay.value = "block";
    mobileDisplay.value = "none";
  }
}

const list = ref([
  {
    name: "掘金热门",
    type: "juejin",
    last_update_time: "",
    show: false,
  },
  {
    name: "知乎热榜",
    type: "zhihu",
    last_update_time: "",
    show: false,
  },
  {
    name: "微博热搜",
    type: "weibo",
    last_update_time: "",
    show: false,
  },
  {
    name: "B站热门",
    type: "bilibili",
    last_update_time: "",
    show: false,
  },
  {
    name: "百度热搜",
    type: "baidu",
  },
  {
    name: "虎扑热帖",
    type: "hupu",
    last_update_time: "",
    show: false,
  },
  {
    name: "豆瓣精选",
    type: "douban",
    last_update_time: "",
    show: false,
  },
]);

const articleList = ref([
  {
    name: "记录发布一个自用npm包的过程",
    url: "https://juejin.cn/post/7210746685788602423",
    create_time: "2023-03-15 20:21",
  },
  {
    name: "echarts堆叠柱状图始终设置最上方的一项为圆角",
    url: "https://juejin.cn/post/7240636320761626682",
    create_time: "2023-06-04 16:02",
  },
  {
    name: "Vue中前端导出word文件",
    url: "https://juejin.cn/post/7269022955471749131",
    create_time: "2023-08-20 15:33",
  },
  {
    name: "vue3+vite4项目打包一次同时生成两个dist文件(测试环境和生产环境)",
    url: "https://juejin.cn/post/7361426249379987468",
    create_time: "2024-04-25 16:08",
  },
  {
    name: "视频保存在本地时的前端优化方案",
    url: "https://juejin.cn/post/7488532479482003483",
    create_time: "2025-04-02 17:45",
  },
  {
    name: "babel部分基础包的作用",
    url: "https://blog.csdn.net/ffffffbb/article/details/129309928?spm=1001.2014.3001.5501",
    create_time: "2023-03-04 14:12",
  },
]);

function goOriginArticle(item) {
  window.open(item.url, "_blank");
}

onMounted(() => {
  for (const [k, v] of Object.entries(icons)) {
    let name = k.slice(k.lastIndexOf("/") + 1, -4);
    list.value.forEach((plat) => {
      if (plat.type === name) {
        plat.icon = v.default;
      }
    });
    console.log(name);
  }
  changePcMobile();
  window.addEventListener("resize", changePcMobile);
  getHotList().then((res) => {
    if (res.code === 0) {
      console.log(res, "====13");
      if (res.code === 0) {
        for (const [k, v] of Object.entries(res.data)) {
          list.value.forEach((item) => {
            if (item.type === k) {
              item.list = v.list;
              item.last_update_time = v.updateTime;
            }
          });
        }
      }
    }
  });
});

let nameReflect = {
  zhihu: 1,
  juejin: 2,
  weibo: 3,
  douban: 4,
  baidu: 5,
  bilibili: 6,
  hupu: 7,
};
function refreshItem(item) {
  console.log(item.last_update_time, "====227");
  // if (
  //   item.last_update_time?.slice(0, -3) < 5 &&
  //   item.last_update_time?.slice(-3, -1) === "分钟"
  // ) {
  //   message.error("数据更新过于频繁，请稍后再试！");
  //   return;
  // }
  item.refreshFlag = true;
  getHotList({
    type: nameReflect[item.type],
  }).then((res) => {
    item.refreshFlag = false;
    if (res.code === 0) {
      item.list = res.data.list;
      item.last_update_time = res.data.updateTime;
      message.success(`${item.name}更新成功!`);
    }
  });
}
function refreshAll() {
  refreshHotList().then((res) => {
    if (res.code === 0) {
      for (const [k, v] of Object.entries(res.data)) {
        list.value.forEach((item) => {
          if (item.type === k) {
            item.list = v.list;
            item.last_update_time = v.updateTime;
          }
        });
      }
    }
  });
}

function goToOrigin(item) {
  window.open(item.url, "_blank");
}
</script>

<style scoped lang="less">
@keyframes rotateAnimation {
  from {
    rotate: 0;
  }

  to {
    rotate: 360deg;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hot-list {
  font-size: 16px;
  height: 100%;
  padding: 8px;

  &-wrapper {
    height: 100%;

    .list-wrapper-pc {
      padding-bottom: 50px;

      .search {
        padding: 16px;
        border-radius: 8px;
        background-color: #fff;
        justify-content: space-between;

        img {
          width: 32px;
        }

        .ant-input-affix-wrapper {
          width: 300px;
        }

        .tips {
          font-size: 14px;
          background-color: #fff9e0;
          border-radius: 8px;
          padding: 8px;
        }
      }

      .list-wrapper-author {
        position: relative;

        .list-wrapper {
          flex-wrap: wrap;
          position: relative;
          padding-right: 408px;

          .hot-list-item {
            width: calc(33.33% - 25px);
          }

          @media (max-width: 1600px) {
            .hot-list-item {
              width: calc(25% - 25px);
            }
          }

          @media (max-width: 1200px) {
            .hot-list-item {
              width: calc(20% - 25px);
            }
          }

          .hot-list-item {
            border-radius: 8px;
            background-color: #fff;
            padding: 16px;
            aspect-ratio: 1 / 1;
            animation: fadeIn 0.5s ease-in-out;

            .title {
              justify-content: space-between;

              &-left {
                img {
                  width: 24px;
                }

                .name {
                  margin-left: 3px;
                }
              }

              .last-update-time {
                font-size: 12px;
                color: #999;
              }

              .anticon {
                color: @shallow-text-color;
                margin-right: 16px;

                &.rotate {
                  animation: rotateAnimation 0.5s linear;
                }
              }
            }

            .content-list {
              flex: 1;
              overflow: auto;

              &::-webkit-scrollbar {
                width: 8px;
              }

              // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
              &::-webkit-scrollbar-button {
                display: none;
              }
              // 滚动条的轨道（里面装有Thumb）
              &::-webkit-scrollbar-track {
                background: transparent;
              }
              // 滚动条的轨道（里面装有Thumb）
              &::-webkit-scrollbar-track-piece {
                background-color: transparent;
              }
              // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
              &::-webkit-scrollbar-thumb {
                background: transparent !important;
                cursor: pointer;
                border-radius: 12px;
              }
              // 边角，即两个滚动条的交汇处
              &::-webkit-scrollbar-corner {
                display: none;
              }
              // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
              &::-webkit-resizer {
                display: none;
              }

              &.scroll-bar {
                &::-webkit-scrollbar {
                  width: 8px;
                }

                // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
                &::-webkit-scrollbar-button {
                  display: none;
                }
                // 滚动条的轨道（里面装有Thumb）
                &::-webkit-scrollbar-track {
                  background: transparent;
                }
                // 滚动条的轨道（里面装有Thumb）
                &::-webkit-scrollbar-track-piece {
                  background-color: transparent;
                }
                // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
                &::-webkit-scrollbar-thumb {
                  background: #e7e6e6 !important;
                  cursor: pointer;
                  border-radius: 12px;
                }
                // 边角，即两个滚动条的交汇处
                &::-webkit-scrollbar-corner {
                  display: none;
                }
                // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
                &::-webkit-resizer {
                  display: none;
                }
              }

              .content-item {
                font-size: 14px;

                .content-text {
                  flex: 1;
                }

                .content-num {
                  color: #f46267;
                }
              }
            }

            .text {
              letter-spacing: 1px;
            }
          }
        }

        .author-article {
          border-radius: 8px;
          background-color: #fff;
          padding: 16px;
          width: 360px;
          max-height: 50vh;
          overflow-x: hidden;
          height: max-content;
          position: fixed;
          right: 32px;
          top: 30vh;

          .article-item {
            width: 100%;
          }
        }
      }
    }

    .list-wrapper-mobile {
      font-size: 12px;

      .slot-class {
        height: 100%;
        padding-bottom: 16px;

        .tips {
          margin-left: -16px;
          background-color: #fff;
          align-items: flex-start;
          font-size: 10px;
          letter-spacing: 0.5px;
          line-height: 14px;
          border-radius: 0 8px 0 0;
        }

        .input-wrapper {
          margin-left: -16px;
        }

        .list-wrapper {
          flex: 1;
          overflow: auto;

          .no-more {
            color: @shallow-text-color;
          }

          .hot-list-item {
            height: 100%;
            overflow: auto;
            padding: 8px;
            border-radius: 8px 8px 0 0;
            background-color: #fff;
            animation: fadeIn 0.5s ease-in-out;
            .title {
              justify-content: space-between;

              &-left {
                img {
                  width: 16px;
                }

                .name {
                  margin-left: 3px;
                }
              }

              .last-update-time {
                font-size: 10px;
                color: #999;
              }

              .anticon {
                color: @shallow-text-color;
                margin-right: 16px;

                &.rotate {
                  animation: rotateAnimation 0.5s linear;
                }
              }
            }

            .content-list {
              flex: 1;
              overflow: auto;

              &::-webkit-scrollbar {
                width: 8px;
              }

              // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
              &::-webkit-scrollbar-button {
                display: none;
              }
              // 滚动条的轨道（里面装有Thumb）
              &::-webkit-scrollbar-track {
                background: transparent;
              }
              // 滚动条的轨道（里面装有Thumb）
              &::-webkit-scrollbar-track-piece {
                background-color: transparent;
              }
              // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
              &::-webkit-scrollbar-thumb {
                background: transparent !important;
                cursor: pointer;
                border-radius: 12px;
              }
              // 边角，即两个滚动条的交汇处
              &::-webkit-scrollbar-corner {
                display: none;
              }
              // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
              &::-webkit-resizer {
                display: none;
              }

              &.scroll-bar {
                &::-webkit-scrollbar {
                  width: 8px;
                }

                // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
                &::-webkit-scrollbar-button {
                  display: none;
                }
                // 滚动条的轨道（里面装有Thumb）
                &::-webkit-scrollbar-track {
                  background: transparent;
                }
                // 滚动条的轨道（里面装有Thumb）
                &::-webkit-scrollbar-track-piece {
                  background-color: transparent;
                }
                // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
                &::-webkit-scrollbar-thumb {
                  background: #e7e6e6 !important;
                  cursor: pointer;
                  border-radius: 12px;
                }
                // 边角，即两个滚动条的交汇处
                &::-webkit-scrollbar-corner {
                  display: none;
                }
                // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
                &::-webkit-resizer {
                  display: none;
                }
              }

              .content-item {
                font-size: 10px;

                .content-text {
                  flex: 1;
                }

                .content-num {
                  color: #f46267;
                }
              }
            }

            .text {
              letter-spacing: 1px;
            }
          }
        }
      }
    }
  }
}
</style>
